import React, {useEffect, useMemo, useState} from 'react';
import s from "./cys.module.less"
import {Button, Form, Input, Radio, Result, Space, TextArea} from "antd-mobile";
import UploadBanner from "@/cms/UploadBanner";
import {message} from "antd";
import {useNavigate} from "react-router-dom";
import useOpenid from "@/pages/wx/use/useOpenid";
function Index(props) {
    const [form] = Form.useForm();
    const [status, setStatus] = useState(-1),
        [dpList,setDpList] = useState([]),
        {openid} = useOpenid();
    const navigate = useNavigate();

    const checkMobile = (_, value) => {
        const pattern = /^1[3-9]\d{9}$/;
        if (pattern.test(value) || value === "") {
            return Promise.resolve()
        }
        return Promise.reject(new Error('请输入正确的手机号!'))
    }

    function onFinish(values) {
        const params = {
            ...values,
            age: values.age * 1,
            openid,
            role:1
        }
        ax.post("/app/teaerRegister", params).then(res => {
            message.success(res.msg);
            getStatus()
        })
    }

    useEffect(() => {
        getStatus();
        getCmsList();
    }, [])

    function getCmsList(){

        ax.get("/app/dpList",{
            params:{
                city:"北京市"
            }
        }).then(res => {
            setDpList(res.data)
        })
    }
    function getStatus() {
        ax.get("/app/teaerRegStatus", {
            params: {
                openid
            }
        }).then(res => {
            setStatus(res.data.status)
        })
    }

    const page = useMemo(() => {
        if (status === 0) {
            return <Result
                status='waiting'
                title='审核中'
                description='审核中, 审核周期约24小时！'
            />
        }
        if (status === -1) {
            return <Form
                layout='vertical'
                form={form}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        立即申请
                    </Button>
                }
                onFinish={onFinish}
            >
                <Form.Header>申请成为保洁</Form.Header>
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{required: true, message: '姓名不能为空'}]}
                >
                    <Input placeholder='请输入姓名'/>
                </Form.Item>
                <Form.Item
                    name='phone'
                    label='手机号'
                    rules={[{required: true}, {validator: checkMobile}]}
                >
                    <Input placeholder='请输入姓名'/>
                </Form.Item>
                <Form.Item name='gender' label='性别' required>
                    <Radio.Group defaultValue='1'>
                        <Space direction='vertical'>
                            <Radio value='男'>男</Radio>
                            <Radio value='女'>女</Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label='年龄' name='age'>
                    <Input placeholder='请输入年龄' clearable type={"number"}/>
                </Form.Item>
                <Form.Item label='申请店铺' name='companyId'>
                    <Radio.Group defaultValue='1'>
                        <Space direction='vertical'>
                            {
                                dpList.map(item=>(<Radio value={item.ID} key={item.ID}>{item.name}</Radio>))
                            }
                        </Space>
                    </Radio.Group>
                </Form.Item>

                {/*<Form.Item label='身份证号' name='idNum' required>*/}
                {/*    <Input placeholder='请输入身份证号' clearable/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item*/}
                {/*    name='address'*/}
                {/*    label='地址' help='详情地址'*/}
                {/*    rules={[{required: true, message: '地址不能为空'}]}*/}
                {/*>*/}
                {/*    <TextArea*/}
                {/*        placeholder='请输入地址'*/}
                {/*        maxLength={100}*/}
                {/*        rows={2}*/}
                {/*        showCount*/}
                {/*        clearable*/}
                {/*    />*/}
                {/*</Form.Item>*/}
                {/*<Form.Item*/}
                {/*    label={"证件照片"}*/}
                {/*    name={"idCard"}*/}
                {/*    rules={[{required: true, message: '请上传身份证正反面'}]}*/}
                {/*>*/}
                {/*    <UploadBanner/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item*/}
                {/*    label={"个人照片"}*/}
                {/*    name={"avatar"}*/}
                {/*    rules={[{required: true, message: '请上传个人照片'}]}*/}
                {/*>*/}
                {/*    <UploadBanner/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label='服务费' name='price'>*/}
                {/*    <Input placeholder='请输入每小时的服务费' clearable type={"number"}/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item*/}
                {/*    name='desc'*/}
                {/*    label='个人介绍'*/}
                {/*    rules={[{required: true, message: '个人介绍不能为空'}]}*/}
                {/*>*/}
                {/*    <TextArea*/}
                {/*        placeholder='如：大家好，我是您的茶艺师小雅。自幼深受茶文化熏陶，我深爱这片树叶所承载的千年底蕴与人文情感。从事茶艺工作多年，我精研六大茶类，熟知各类茶叶冲泡技法，并致力于将传统茶道艺术与现代生活美学相结合。在茶的世界里，我用心感知每一片茶叶的生命力，力求为每一位客人呈现一杯色香味俱佳的好茶，让您在品茗之间尽享生活的宁静与淡然之美。同时，我也热衷于传播茶知识，期待与您共享茶之韵味，共悟茶之道。'*/}
                {/*        maxLength={300}*/}
                {/*        rows={5}*/}
                {/*        showCount*/}
                {/*    />*/}
                {/*</Form.Item>*/}
            </Form>
        }
        // navigate("/wx/OrderList")
        return null
    }, [status, form, onFinish])
    return (
        <div className={s.wrap}>
            {
                page
            }
        </div>
    );
}

export default Index;